<template>
  <div class="max-w-md mx-auto mt-16 bg-white p-8 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-6 text-center">注册</h2>
    
    <div v-if="error" class="mb-4 p-3 bg-red-100 text-red-700 rounded">
      {{ error }}
    </div>
    
    <form @submit.prevent="handleRegister">
      <div class="mb-4">
        <label for="username" class="block text-gray-700 font-medium mb-2">用户名</label>
        <input 
          type="text" 
          id="username" 
          v-model="username" 
          class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          required
        >
      </div>
      
      <div class="mb-4">
        <label for="email" class="block text-gray-700 font-medium mb-2">邮箱</label>
        <input 
          type="email" 
          id="email" 
          v-model="email" 
          class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          required
        >
      </div>
      
      <div class="mb-4">
        <label for="password" class="block text-gray-700 font-medium mb-2">密码</label>
        <input 
          type="password" 
          id="password" 
          v-model="password" 
          class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          required
        >
      </div>
      
      <div class="mb-6">
        <label for="confirmPassword" class="block text-gray-700 font-medium mb-2">确认密码</label>
        <input 
          type="password" 
          id="confirmPassword" 
          v-model="confirmPassword" 
          class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          required
        >
      </div>
      
      <button 
        type="submit" 
        class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md transition duration-300"
        :disabled="loading"
      >
        {{ loading ? '注册中...' : '注册' }}
      </button>
    </form>
    
    <p class="mt-4 text-center">
      已有账号? <router-link to="/login" class="text-blue-500 hover:underline">登录</router-link>
    </p>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useAuthStore } from '@/store/modules/auth'

export default {
  setup() {
    const authStore = useAuthStore()
    
    const username = ref('')
    const email = ref('')
    const password = ref('')
    const confirmPassword = ref('')
    const error = ref('')
    const loading = ref(false)
    
    const handleRegister = async () => {
      error.value = ''
      loading.value = true
      
      // 密码验证
      if (password.value !== confirmPassword.value) {
        error.value = '两次输入的密码不一致'
        loading.value = false
        return
      }
      
      try {
        await authStore.register({
          username: username.value,
          email: email.value,
          password: password.value
        })
        // 注册成功后跳转到首页
        this.$router.push('/')
      } catch (err) {
        error.value = err.message || '注册失败，请重试'
      } finally {
        loading.value = false
      }
    }
    
    return {
      username,
      email,
      password,
      confirmPassword,
      error,
      loading,
      handleRegister
    }
  }
}
</script>